
<template>
<div>
  <div class="code" @click="getCode">
    {{ btnText }}
  </div>

</div>
</template>

<script>

export default {
  name: 'GetCode',
  data: function () {
    return {
      btnText: '验证码',
      time: 5,
      timeer: null,
    }
  },
  props: ['phone'],
  components: {

  },
  methods:{
    getCode(){

      if (this.time <5 ){
        alert("正在发送验证码，请稍后")
        return;
      }

     this.timeer =  setInterval( ()=> {
        if (this.time >= 1){
          this.time --
          this.btnText = "发送中("+this.time+")"
        } else {
          clearInterval(this.timeer)
          this.btnText = "验证码"
          this.time = 5
        }
      },1000)


      if (this.phone.length != 11){
        alert("你的手机号码不正确")
        return
      }
      console.log("发送验证码",this.phone)
    }

  },
  computed:{

  },
  watch:{
    count(val,oldval){
      console.log(val);
      console.log(oldval);
    }
  }
}
</script>


<style scoped lang="scss">
.code{
  margin-left: 5px;;
  background: #42b983;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
